<template>
  <div class="individuation">
    <div class="header-tip flex">
      <span>薪酬设置流程：【设置工资表模板】→【企业设置】→【设置计薪规则】→【关联薪资组】</span>
      <Icon type="ios-close" size="18" />
    </div>

    <div class="step-section">
      <div class="section">
        <div class="s-header flex">
          <h3>固定工资设置</h3>
        </div>
        <div class="section-content">
          <div class="content-desc">隐藏后，月工资表和薪酬报表等，将均不再显示试用期固定工资项</div>
          <div class="content-detail">
            <p>
              <i-switch size="large">
                <span slot="open">显示</span>
                <span slot="close">关闭</span>
              </i-switch>
            </p>
          </div>
        </div>
      </div>

      <div class="section">
        <div class="s-header flex">
          <h3>计薪周期</h3>
        </div>
        <div class="section-content">
          <div class="content-desc">计薪周期设定后将不可修改</div>
          <div class="content-detail">
            <p>从1号开始</p>
          </div>
        </div>
      </div>

      <div class="section">
        <div class="s-header flex">
          <h3>计薪周期</h3>
        </div>
        <div class="section-content">
          <div class="content-desc">计薪周期设定后将不可修改</div>
          <div class="content-detail">
            <p>从1号开始</p>
          </div>
        </div>
      </div>

      <div class="section">
        <div class="s-header flex">
          <h3>发薪日期设置</h3>
        </div>
        <div class="section-content">
          <div class="content-desc">设置每月发薪日及提醒，系统会提前给予计薪提醒。</div>
          <div class="content-detail">
            <p class="detail-p">
              <Select class="form-input">
                <Option :value="item" v-for="(item, index) in date" :key="index">{{item}}日</Option>
              </Select>
            </p>
            <p class="detail-p">
              <Select class="form-input">
                <Option value="beijing">提前3天提醒</Option>
                <Option value="shanghai">提前5天提醒</Option>
                <Option value="shenzhen">提前7天提醒</Option>
              </Select>
            </p>
          </div>
        </div>
      </div>

      <div class="section">
        <div class="s-header flex">
          <h3>工资卡开户行</h3>
        </div>
        <div class="section-content">
          <div class="content-desc">选择您企业的工资卡开户行，计薪后，将为您生成符合要求的银行对接表。</div>
          <div class="content-detail">
            <p>
              <Input v-model="formItem.input" placeholder="工号" class="form-input"></Input>

              <Tooltip placement="top">
                <Icon type="ios-help-circle" size="18" />
                <div
                  slot="content"
                  class="tooltip-custom"
                >工资卡开户行将用于生成银行发薪对接表，若有多个银行，系统会智能匹配；若没有您企业的工资卡开户行，请联系客服，提供模板。</div>
              </Tooltip>
            </p>
          </div>
        </div>
      </div>
      <div class="section">
        <div class="s-header flex">
          <h3>司龄 / 工龄计算规则</h3>
        </div>
        <div class="section-content">
          <div
            class="content-desc"
          >选择员工的司龄 / 工龄计算规则，所有与司龄 / 工龄相关的薪酬计算（包括津补贴发放规则和请假按司龄 / 工龄扣款规则），均按此规则计算</div>
          <div class="content-detail">
            <RadioGroup v-model="vertical" vertical>
              <Radio label="1">
                <Icon type="social-apple"></Icon>
                <span>当月 1 号满周年，当月享受补贴，否则次月享受补贴（或按司龄 / 工龄对应的计薪比例，计算请假扣款）</span>
              </Radio>
              <Radio label="2">
                <Icon type="social-android"></Icon>
                <span>当月内满周年，当月享受补贴；或按司龄 / 工龄对应的计薪比例，计算请假扣款</span>
              </Radio>
            </RadioGroup>
          </div>
        </div>
      </div>
      <div class="footer-btns ">
          <Button class="save-btn-green">保存</Button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
        vertical:'1',
      current: 0,
      formItem: {
        input: ""
      },
      modal2: false
    };
  },
  methods: {},
  computed: {
    date() {
      let a = [];
      for (var i = 1; i <= 31; i++) {
        a.push(i);
      }
      return a;
    }
  }
};
</script>
<style lang="scss" scoped src='../index.scss'>
</style>